<template>
  <div class="dashboard-container">
    <el-card>
      <Headers
        :inp-show="true"
        :btn-show="true"
        btn-text="添加用户"
        :thickness-is-show="dashboardThickness"
        @onShowhickness="onShowhickness"
        @onSerach="onSerach"
      />
      <el-table :data="userdata" stripe border>
        <el-table-column type="index" />
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="mobile" label="电话" width="180" />
        <el-table-column prop="role_name" label="角色" width="180" />
        <el-table-column prop="mg_state" label="状态" width="180">
          <template v-slot="{ row }">
            <el-switch v-model="row.mg_state" @change="switchChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="userModify(row)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="open(row.id)"
            />
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="small"
              @click="userCharacter(row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="pages.pagenum"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pages.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加弹层 -->
    <el-dialog title="添加用户" :visible.sync="dashboardThickness">
      <thickness
        :dashboard-thickness.sync="dashboardThickness"
        @users="users"
      />
    </el-dialog>
    <!-- 修改弹层 -->
    <el-dialog
      v-if="dashboardModify"
      title="修改用户"
      :visible.sync="dashboardModify"
    >
      <modify
        :rows="rows"
        :dashboard-modify.sync="dashboardModify"
        @users="users"
      />
    </el-dialog>
    <!-- 分配角色弹层 -->
    <el-dialog title="分配角色" :visible.sync="dashboardCharacter">
      <character
        :userlists="userlists"
        :character-row="CharacterRow"
        :dashboard-character.sync="dashboardCharacter"
        @users="users"
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Headers from '@/components/Headers'
import thickness from './component/thickness.vue'
import Modify from './component/Modify.vue'
import Character from './component/character.vue'
import { users, userState, usersRemove, userRoles } from '@/api/user'
export default {
  name: 'Dashboard',
  components: {
    Headers,
    thickness,
    Modify,
    Character
  },
  data() {
    return {
      pages: {
        query: null,
        pagenum: 1,
        pagesize: 5,
        total: null
      },
      userdata: [], // 刷新的数据
      value: true,
      currentPage4: 4,
      dashboardThickness: false, // 弹层
      dashboardModify: false, // 修改弹层
      dashboardCharacter: false, // 角色弹层
      rows: {}, // 修改数据
      userlists: [], // 分配角色列表
      CharacterRow: {} // 当前角色数据
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    this.users()
  },
  methods: {
    users() {
      users(this.pages).then(
        (response) => {
          console.log(response.data.data)
          const datass = response.data.data
          this.userdata = datass.users
          this.pages.pagenum = datass.pagenum
          this.pages.total = datass.total
          this.$message.success('更新成功~!')
        },
        (error) => {
          console.log(error.message)
        }
      )
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleSizeChange(val) {
      this.pages.pagesize = val
      this.users()
    },
    handleCurrentChange(val) {
      this.pages.pagenum = val
      this.users()
    },
    onShowhickness(isShow) {
      this.dashboardThickness = isShow
    },
    // 点击删除
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await usersRemove(id)
          this.users()
          this.$message({
            type: 'success',
            message: '删除用户成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 状态
    async switchChange(row) {
      try {
        await userState({
          uId: row.id,
          type: row.mg_state
        })
        this.$message.success('状态更新成功!')
      } catch (error) {
        this.$message.error('状态更新失败!')
        console.log(error)
      }
    },
    // 修改
    userModify(row) {
      this.rows = row
      this.dashboardModify = true
    },
    async userCharacter(row) {
      this.CharacterRow = row
      this.userlists = []
      try {
        const { data } = await userRoles()
        console.log(data)
        data.data.forEach((item) => {
          this.userlists.push({ label: item.roleName, value: item.id })
        })
      } catch (error) {
        console.log(error)
      }
      this.dashboardCharacter = true
    },
    onSerach(value) {
      console.log(value)
      this.pages.query = value
      this.users()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
